<template>
  <div class="interview" v-if="currentQue.detail">
    <!-- 头部 -->
    <van-nav-bar>
      <template #title>
        <div>
          面试题 <sup>{{ questionsList.length }}</sup>
        </div>
      </template>
      <template #left>
        <i
          @click="$router.push('/questions')"
          class="iconfont iconbtn_nav_back myicon"
        ></i>
      </template>
      <template #right>
        <div @click="show = true">答题卡</div>
      </template>
    </van-nav-bar>
    <!-- 内容区域 -->
    <div class="main">
      <!-- 标题 -->
      <div class="title">
        <span>【{{ typeObj[currentQue.detail.type] }}】</span>
        <!-- <span v-if="currentQue.detail.type === 1"> 【单选】</span>
        <span v-if="currentQue.detail.type === 2"> 【多选】</span>
        <span v-if="currentQue.detail.type === 3"> 【简答】</span> -->
        <span>{{ currentQue.detail.title }} </span>
      </div>
      <!-- 标签 -->
      <div class="tags">
        <span v-for="(item, index) in currentQue.detail.tag" :key="index">{{
          item
        }}</span>
      </div>
      <!-- 答案选择框 -->
      <div class="answer">
        <!-- 单选 -->
        <!-- :class="setCss(item)" -->
        <van-radio-group v-model="radio" v-if="currentQue.detail.type === 1">
          <van-radio
            :name="item"
            v-for="(item, index) in option"
            :key="index"
            :class="setCss(item)"
            :disabled="!!currentQue.result"
          >
            <template #icon>
              <div class="options">{{ item }}.</div>
            </template>
            <template>
              <div class="optionList">
                <span> {{ currentQue.detail.option[index] }} </span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-radio>
          <!-- <van-radio name="A">
            <template #icon>
              <div class="options">A.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[0] }}
              </div>
            </template>
          </van-radio>
          <van-radio name="B">
            <template #icon>
              <div class="options">B.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[1] }}
              </div>
            </template>
          </van-radio>
          <van-radio name="C">
            <template #icon>
              <div class="options">C.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[2] }}
              </div>
            </template>
          </van-radio>
          <van-radio name="D">
            <template #icon>
              <div class="options">D.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[3] }}
              </div>
            </template>
          </van-radio> -->
        </van-radio-group>
        <!-- 多选 -->
        <van-checkbox-group
          v-model="result"
          v-if="currentQue.detail.type === 2"
        >
          {{ result }}
          <van-checkbox
            :name="item"
            v-for="(item, index) in option"
            :key="index"
            :class="setCss(item)"
            :disabled="!!currentQue.result"
          >
            <template #icon>
              <div class="options">{{ item }}.</div>
            </template>
            <template>
              <div>
                <div class="optionList">
                  <span> {{ currentQue.detail.option[index] }} </span>
                  <i class="iconfont iconicon_zhengque"></i>
                  <i class="iconfont iconicon_cuowu"></i>
                </div>
              </div>
            </template>
          </van-checkbox>
          <!-- <van-checkbox name="A">
            <template #icon>
              <div class="options">A.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[0] }}
              </div>
            </template>
          </van-checkbox>
          <van-checkbox name="B">
            <template #icon>
              <div class="options">B.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[1] }}
              </div>
            </template>
          </van-checkbox>
          <van-checkbox name="C">
            <template #icon>
              <div class="options">C.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[2] }}
              </div>
            </template>
          </van-checkbox>
          <van-checkbox name="D">
            <template #icon>
              <div class="options">D.</div>
            </template>
            <template>
              <div>
                {{ currentQue.detail.option[3] }}
              </div>
            </template>
          </van-checkbox> -->
        </van-checkbox-group>
      </div>
      <!-- 答案解析 -->
      <div class="result" v-if="currentQue.result">
        <h2>答案解析</h2>
        <div class="rightKey">
          <span v-if="currentQue.detail.type === 1"
            >正确答案：{{ currentQue.result.singleAnswer }}</span
          >
          <span v-if="currentQue.detail.type === 2"
            >正确答案：{{ currentQue.result.multipleAnswer.join(',') }}</span
          >
        </div>
        <div class="resultInfo">
          <div class="item">
            难度：{{ difficultyObj[currentQue.result.difficulty] }}
          </div>
          <div class="item">提交次数:{{ currentQue.result.submitNum }}</div>
          <div class="item">正确次数:{{ currentQue.result.correctNum }}</div>
        </div>
        <div class="word">
          {{ currentQue.result.answerAnalysis }}
        </div>
      </div>
    </div>
    <div style="height: 1px; background:#fff;"></div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="star">
        <i class="iconfont iconbtn_shoucang_nor"></i>
        收藏
      </div>
      <div class="star">
        <i class="iconfont iconbtn_shuati_fankui"></i>
        反馈
      </div>
      <div class="num">
        <span>{{ currentIndex + 1 }}</span
        ><span>/{{ questionsList.length }}题</span>
      </div>
      <div class="submit">
        <van-button
          v-if="!currentQue.result"
          :disabled="isDisabled"
          type="danger"
          size="large"
          @click="submit"
          >提交</van-button
        >
        <van-button
          type="info"
          size="large"
          v-if="currentQue.result"
          @click="goNext"
          >下一题</van-button
        >
      </div>
    </div>
    <!-- 答题卡 -->
    <van-popup v-model="show" position="bottom">
      <van-nav-bar>
        <template #title>
          <div>
            答题卡
          </div>
        </template>
        <template #left>
          <i @click="show = false" class="iconfont iconbtn_nav_back myicon"></i>
        </template>
        <template #right>
          <div class="num">
            <span>{{ currentIndex + 1 }}</span
            ><span>/{{ questionsList.length }}题</span>
          </div>
        </template>
      </van-nav-bar>
      <div class="box">
        <div class="hint">共{{ questionsList.length }}题</div>
        <ul class="select">
          <li
            v-for="(item, index) in questionsList"
            :key="index"
            @click="getIndex(index)"
          >
            {{ index + 1 }}
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { apiGetQuestions, apiSubmit, apiGetQueInfo } from '@/api/questions.js'
export default {
  computed: {
    // 获取到当前题目
    currentQue () {
      return this.questionsList[this.currentIndex] || {}
    },
    // 是否禁用提交按钮
    isDisabled () {
      // 是单选题的时候判断它
      if (this.currentQue.detail.type === 1) {
        return !this.radio
      }
      return false
    },
    // 设置css
    setCss () {
      return item => {
        // 判断有没有面试题
        if (!this.currentQue.result) {
          return ''
        }
        // 判断题型单选
        if (this.currentQue.detail.type === 1) {
          // 判断正确答案是否和用户选择的答案相等则返回正确的css样式
          if (this.currentQue.result.singleAnswer === item) {
            return 'right'
          }
          // 判断正确答案是否和用户选择的答案不相等则返回错误的css样式
          if (
            this.radio === item &&
            this.currentQue.result.singleAnswer !== item
          ) {
            return 'error'
          }
        }
        // 多选
        if (this.currentQue.detail.type === 2) {
          // 判断正确答案是否和用户选择的答案相等则返回正确的css样式
          if (this.currentQue.result.multipleAnswer.includes(item)) {
            return 'right'
          }
          // 判断正确答案是否和用户选择的答案不相等则返回错误的css样式
          if (
            this.result.includes(item) &&
            !this.currentQue.result.multipleAnswer.includes(item)
          ) {
            return 'error'
          }
        }
        return ''
      }
    }
  },

  data () {
    return {
      // 答题卡
      show: false,
      // 单选
      radio: '',
      //   多选
      result: [],
      // 职位id
      type: this.$route.query.type,
      // 城市名
      city: this.$route.query.city,
      // 题目列表
      questionsList: [],
      // 当前题目下标
      currentIndex: 0,
      // 题目类型
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      //   选项
      option: ['A', 'B', 'C', 'D'],
      // 题目难度
      difficultyObj: {
        1: '简单',
        2: '中等',
        3: '困难'
      }
    }
  },
  methods: {
    // 获取题目列表
    async getQuestions () {
      const res = await apiGetQuestions({
        type: this.type,
        city: this.city
      })
      //   console.log(res)
      this.questionsList = res.data
      console.log(this.questionsList[this.currentIndex])

      console.log(this.currentQue)
    },
    // 提交试题
    async submit () {
      const res = await apiSubmit({
        id: this.questionsList[this.currentIndex].id,
        singleAnswer: this.radio,
        multipleAnswer: this.result
      })
      console.log(res)
      this.$set(this.questionsList[this.currentIndex], 'result', res.data)
    },
    // 获取下一题
    async goNext () {
      this.radio = ''
      this.result = []
      this.currentIndex++
      const res = await apiGetQueInfo(this.currentQue.id)

      this.$set(this.questionsList[this.currentIndex], 'detail', res.data)
    },
    // 点击编号获取
    async getIndex (index) {
      this.currentIndex = index
      // 判断题目是否存在 不存在就请求
      if (!this.currentQue.detail) {
        const res = await apiGetQueInfo(this.currentQue.id)
        this.$set(this.questionsList[this.currentIndex], 'detail', res.data)
        console.log(res)
      }
      this.show = false
    }
  },
  created () {
    this.getQuestions()
  }
}
</script>

<style lang="less" scoped>
.interview {
  font-size: 12px;
  background: #fff;
  // height: 100%;
  font-size: 12px;
  /deep/.van-nav-bar__left {
    padding-left: 0px;
  }
  /deep/ .van-nav-bar__title {
    font-weight: 600;
    font-size: 18px;
  }
  .myicon {
    font-size: 50px;
  }
  .main {
    padding: 20px 15px;
    margin-bottom: 80px;
    background: #fff;
    .title {
      line-height: 20px;
      font-size: 16px;
    }
    .tags {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      span {
        background: #f7f4f5;
        border-radius: 3px;
        padding: 5px;
        color: #b4b4bd;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }
    .answer {
      margin-top: 20px;
      /deep/.van-radio,
      .van-checkbox {
        box-sizing: border-box;
        padding: 15px;
        border: 1px solid #f7f4f5;
        margin-bottom: 20px;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        .options {
          font-size: 16px;
          .optionList {
            display: flex;
            justify-content: space-between;
          }
        }
        i.iconfont {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          width: 20px;
          display: none;
        }
      }
      [aria-checked='true'] {
        border: 1px solid #b4b4bd !important;
      }
      .error {
        border: 1px solid #f7f4f5 !important;
        background: #ffefea !important ;
        i.iconicon_cuowu {
          color: #ff4949 !important;
          display: block !important;
        }
        .optionList {
          span {
            color: #181a39 !important;
          }
        }
      }
      .right {
        border: 1px solid #f7f4f5 !important;

        background: #ddfad9 !important;
        i.iconicon_zhengque {
          color: #1dc779 !important;
          display: block !important;
        }
        .optionList {
          span {
            color: #1dc779 !important;
          }
        }
      }
    }

    .result {
      .rightKey {
        margin: 15px 0;
        font-size: 16px;
        color: #1dc779;
      }
      .resultInfo {
        display: flex;
        height: 32px;
        background: #f7f4f5;
        border-radius: 4px;
        justify-content: space-around;
        align-items: center;
        .item {
          color: #545671;
        }
      }
      .word {
        margin: 20px 0;
        font-size: 16px;
      }
    }
  }
  .bottom {
    position: fixed;
    width: 100%;
    bottom: -1px;
    height: 60px;
    display: flex;
    align-items: center;
    background: #fff;
    .star {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
      color: #b4b4bd;
      .iconfont {
        font-size: 24px;
      }
    }
    .num {
      text-align: center;
      flex: 3;
      span {
        font-size: 16px;
      }
      span:nth-child(1) {
        font-size: 22px;
        color: #e40137ff;
        letter-spacing: 1px;
      }
    }
    .submit {
      text-align: center;
      flex: 2;
      margin-right: 15px;
      /deep/.van-button {
        border-radius: 10px;
      }
    }
  }
  .box {
    .hint {
      height: 44px;
      background: #f7f4f5;
      line-height: 44px;
      padding-left: 10px;
      font-size: 14px;
    }
    .select {
      display: flex;
      padding: 15px 15px 0;
      flex-wrap: wrap;
      li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33px;
        height: 33px;
        border-radius: 50%;
        border: 1px solid #b4b4bd;
        margin-right: 16px;
        margin-bottom: 15px;
        &:nth-child(7n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
